import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Table, Button, Tooltip, Tag, Space, message, Popconfirm, Popover, Switch } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';

export default function RightList() {
    const [dataSource, setDataSource] = useState([])
    // 请求数据
    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            // console.log(res.data);
            const list = res.data
            list.forEach(item => {
                if (item.children.length === 0) {
                    item.children = ""
                }
            })
            setDataSource(list)
        })
    }, [])
    // 点击页面配置项
    const rightStatusChange = (item) => {
        item.pagepermisson = !item.pagepermisson
        // console.log(item);
        setDataSource([...dataSource])
        if(item.grade===1) {
            axios.patch(`/rights/${item.id}`, {
                pagepermisson:item.pagepermisson
            })
        } else {
            axios.patch(`/children/${item.id}`, {
                pagepermisson:item.pagepermisson
            })
        }
    }
    // 表格每列分类配置
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            //   key: 'name',
        },
        {
            title: '权限名称',
            dataIndex: 'title',
            //   key: 'age',
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: (key) => {
                return <div>
                    <Tag color="orange">{key}</Tag>
                </div>
            }
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    <Space size="2">
                        <Popconfirm
                            title="删除权限"
                            description="是否永久删除该权限？"
                            onConfirm={() => confirm(item)}
                            onCancel={cancel}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Tooltip title="删除" mouseLeaveDelay={0}>
                                <Button danger shape="circle" icon={<DeleteOutlined />} style={{ marginRight: '10px' }} />
                            </Tooltip>
                        </Popconfirm>
                        <Popover
                            content={
                                <Switch checked={item.pagepermisson} onChange={() => rightStatusChange(item)} />
                            }
                            title="页面配置项"
                            trigger={item.pagepermisson === undefined? '':'click'}
                        >
                                <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={item.pagepermisson === undefined} />
                        </Popover>
                    </Space>
                </div>
            }
        },
    ];
    // 点击确认删除权限
    const confirm = (item) => {
        // console.log(item);
        delRight(item)
    };
    // 取消权限
    const cancel = (e) => {
        // console.log(e);
        message.info('已取消删除');
    };
    //点击删除的方法
    const delRight = (item) => {
        if (item.grade === 1) {
            setDataSource(dataSource.filter(data => data.id !== item.id))
            axios.delete(`/rights/${item.id}`)
        } else {
            let list = dataSource.filter(data => data.id === item.rightId)
            // console.log(dataSource,'qian');
            // console.log(list);
            list[0].children = list[0].children.filter(data => data.id !== item.id)
            // console.log(dataSource,'hou');
            setDataSource([...dataSource])
            axios.delete(`/children/${item.id}`)
        }
        message.success('删除成功');
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 7
            }} />
        </div>
    )
}
